<script setup lang="ts" name="Player">
import "../assets/styles/Player.scss"
import playerIcon from "@/src/assets/img/aplayer/播放.svg"
import pauseIcon from "@/src/assets/img/aplayer/暂停.svg"
import { DocumentAdd, Refresh } from "@element-plus/icons-vue"
import { reactive } from "vue"
const state = reactive({
  list: [],
  volumes: 70,
  playing: false,
  currentIndex: 0,
  mode: 0, // 0: 顺序播放，1: 循环播放，2: 随机播放
  progress: 0,
  duration: 0,
  currentTime: 0,
  playerMode: [
    { model: "顺序播放", icon: "/src/assets/img/aplayer/序列.svg" },
    { model: "单曲循环", icon: "/src/assets/img/aplayer/循环.svg" },
    { model: "随机播放", icon: "/src/assets/img/aplayer/随机.svg" }
  ],
  isPlayerModel: [
    { model: "播放", icon: playerIcon },
    { model: "暂停", icon: pauseIcon }
  ],
  currenPlayerState: "",
  // 抽屉
  drawer: false,
  animationPlayState: "paused",
  parsedLyrics: [],
  currentLine: -1,
  // 歌曲评论
  commentsList: [],
  currentCommentsPage: 1,
  CommentsTotal: 0,
  loading: true
})
</script>
<template>
  <audio></audio>
  <el-row class="playerbox">
    <!-- 播放控制 -->
    <el-col :span="6">
      <img src="../assets/img/aplayer/上一首.svg" alt="" class="Musicice" />
      <img src="../assets/img/aplayer/播放.svg" alt="" class="Musicice" />
      <img src="../assets/img/aplayer/下一首.svg" alt="" class="Musicice" />
    </el-col>
    <!-- 封面/进度 -->
    <el-col :span="10">
      <el-row>
        <el-col :span="4">
          <img src="../assets/img/vinyl.png" alt="" />
        </el-col>
        <el-col :span="20">
          <div class="m-name">
            <span>xxxx</span>
            <div class="m-icon">
              <el-icon :size="16"><DocumentAdd /></el-icon>
              <el-icon :size="16"><Refresh /></el-icon>
            </div>
          </div>
          <div class="m-info">
            <span class="prismColor">0:00</span>
            <span class="titleandsinger">xxxxx</span>
            <span class="prismColor">0:00</span>
          </div>
          <div class="m-control">
            <el-slider />
          </div>
        </el-col>
      </el-row>
    </el-col>
    <!-- 列表/静音 -->
    <el-col :span="2">
      <img class="m-list" src="../assets/img/aplayer/列表.svg" />
      <img class="m-vol" src="../assets/img/aplayer/声音.svg" />
    </el-col>
    <!-- 音量 -->
    <el-col :span="5">
      <el-slider />
    </el-col>
    <!-- 歌词 -->
    <el-col :span="1">
      <div class="m-words">词</div>
    </el-col>
  </el-row>
</template>

<style scoped>
:deep(.el-slider__button) {
  width: 10px;
  height: 10px;
}
</style>
